<template>
	<view>
		<view>
			<head-title :titleHead="titleHead" :btnFont="mainTitle" :deviceIds="deviceIds" :repArr="repArr"
				:classDeptId="classDeptId" :repairDesc="repairDesc" :className="className" :repairId="repairId"
				:dormitoryNo="dormitoryNo"></head-title>
			<view class="repDevice">报修说明</view>
			<view class="repCheckout">
				<checkbox-group @change="checkboxChange">
					<label v-for="(item,index) in repArr" :key="index">
						<checkbox :checked="item.state" :value="item.deviceId+''" class="leaveCheck">{{item.deviceName}}
						</checkbox>
					</label>
				</checkbox-group>
			</view>
			<view style="font-size: 38rpx;margin-left:70rpx;" v-if="photo">付费凭证</view>
			<image class="repText" style="width:85%;height:200rpx" mode="widthFix" :src="photo"></image>
			<!-- <textarea class="repText" placeholder="备注信息"></textarea> -->
			<view style="font-size: 38rpx;margin-left:70rpx;">维修备注</view>
			<view style="font-size: 28rpx;color:#999;margin-left:96rpx;">{{repairDesc}}</view>

			<view class="logoSty"></view>
		</view>
		<!-- <my-bottom :bottomArr="Repbottoms"></my-bottom>		 -->
	</view>
</template>

<script>
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	import headTitle from '../component/btnHeadeCom.vue'
	export default {
		name: 'repStatus',
		data() {
			return {
				mainTitle: '确认维修',
				topName: '',
				userName: '',
				titleHead: '最新报修',
				photo: '',
				imgShow: '',
				repArr: ["门窗", "空调", "水龙头", "插座", "灯管", "投影仪", "电器", "床铺", "热水表", "桌椅"],
				Repbottoms: [{
						name: 'home',
						icon: 'iconfont icon-baoxiu',
						text: "报修",
						path: '/pages/maintenance/maintenanceIndex'
					},
					{
						name: 'atttendance',
						icon: 'iconfont icon-bi',
						text: "统计",
						path: '/pages/maintenance/maintenanceIndex'
					},
					{
						name: 'maintenance',
						icon: 'iconfont icon-shezhi',
						text: "设置",
						path: '/pages/maintenance/maintenanceIndex'
					}
				],
				repairDesc: '',
				deviceIds: [],
				deviceBox: [],
				className: '',
				dormitoryNo: '',
				repairId: 1,
				classDeptId: 1,
			}
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: "userInfo",
				success: (res) => {
					that.userName = res.data
				}
			})
		},
		onLoad(options) {
			this.className = options.className
			this.dormitoryNo = options.dormitoryNo
			this.topName = this.className || this.dormitoryNo
			this.repairId = options.repairId
			this.classDeptId = options.classDeptId

		},
		mounted() {
			if (this.photo == '') {
				uni.showLoading({
					title: ""
				})
			}
			if (this.className) {
				this.getAppClassDevice()
				this.getClassRepairInfoById()

			} else {
				this.getAppDevice()
				this.getRepairInfoById()

			}


		},
		methods: {
			checkboxChange(e) {
				var items = this.repArr,
					values = e.detail.value;
				console.log(values, "value")
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.deviceId)) {
						this.$set(item, 'state', true)
					} else {
						this.$set(item, 'state', false)
					}
				}
				console.log(this.repArr, "eee")
				// this.deviceBox = this.repArr
				// console.log(this.deviceBox,"box")
			},
			// 维修设备
			getAppDevice() {
				this.$api.teacher.getAppDevice().then(res => {
					this.repArr = res.data
					this.repArr.forEach((item, index) => {
						item.state = false
					})

				})
			},
			getAppClassDevice() {
				this.$api.teacher.getAppClassDevice().then(res => {
					this.repArr = res.data
					this.repArr.forEach((item, index) => {
						item.state = false
					})
				})
			},
			getClassRepairInfoById() {
				this.deviceIds = []
				this.$api.maintenance.getClassRepairInfoById(this.repairId).then(res => {
					this.repairDesc = res.data.repairDesc
					this.photo = 'data:image/gif;base64,' + res.data.photo
					setTimeout(function() {
						uni.hideLoading();
					}, 500);
					const arr1 = res.data.devicesId.split(',')
					const arr2 = arr1.map(Number)
					this.repArr.forEach((item, index) => {
						arr2.forEach((i) => {
							if (item.deviceId == i) {
								this.deviceIds.push(item.deviceId)
								item.state = true
							}
						})
					})

				})
			},
			getRepairInfoById() {
				this.deviceIds = []
				this.$api.maintenance.getRepairInfoById(this.repairId).then(res => {
					this.repairDesc = res.data.repairDesc
					this.photo = 'data:image/gif;base64,' + res.data.photo
					setTimeout(function() {
						uni.hideLoading();
					}, 500);
					const arr1 = res.data.devicesId.split(',')
					const arr2 = arr1.map(Number)
					this.repArr.forEach((item, index) => {
						arr2.forEach((i) => {
							if (item.deviceId == i) {
								this.deviceIds.push(item.deviceId)
								item.state = true
							}
						})
					})
					// this.$forceUpdate()
				})
			},
			chooseImage() {
				var _this = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						_this.imgShow = res.tempFilePaths[0]
					}
				})
			}

		},
		components: {
			topCom,
			bottomCom,
			headTitle
		},
	}
</script>

<style>
	.imgSty {
		border: solid 1upx #999999;
		border-radius: 20upx;
		width: 500upx;
		height: 300upx;
		margin: auto;
		padding: 10upx;
		margin-left: 90rpx;
		margin-top: 0rpx
	}

	.repText {
		/* border: solid 1upx #999999; */
		border-radius: 20upx;
		width: 700rpx;
		/* background-size:contain; */
		height: 400rpx;
		margin-left: 55rpx;


	}

	.repCheckout {
		display: flex;
		/* justify-content: space-between; */
		align-content: center;
		flex-wrap: wrap;
		font-size: 32rpx;
		color: #808080;
		margin-top: 30rpx;
		width: 100%;
		margin-left: -30rpx;
	}

	.repDevice {
		text-align: left;
		font-size: 46rpx;
		color: #808080;
		padding-left: 70rpx;
	}

	.leaveNav {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36upx;
		color: blue;
		width: 100%;
		padding: 50upx
	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		width: 190upx;
		height: 60upx;
		color: white;
		font-size: 26upx;
		font-weight: 0;
	}

	.leaveLine {
		width: 200upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: 0upx;
		left: -30upx;
	}

	.leaveMgm {
		color: #808080;
		font-size: 28upx;
	}

	.leaveCheck {
		margin-left: 100rpx;
		margin-bottom: 30rpx;
	}
</style>